<template>
  <div class="code-mirror-body" style="">
    <div class="code-mirror-tabbar">
<!--      <svg-icon icon-class="ReSize"></svg-icon>-->
    </div>
    {{Code}}
    <!-- 编辑主体 -->
    <monaco-editor v-model:modelValue="Code" height="480px" language="javascript" />

    <!--    <codemirror-->
<!--      ref="=codemirrorRef"-->
<!--      class="code-mirror"-->
<!--      v-model="Code"-->
<!--      placeholder="<script></script>"-->
<!--      :options="cmOptions3"-->
<!--      :style="cmOptions4"-->
<!--      @change="sdfsfasdf"-->
<!--    ></codemirror>-->
  </div>
</template>
<script>
// import codemirror from 'vue-codemirror';
// import '../../../../libs/codemirror/lib/codemirror.css'
// import '../../../../libs/codemirror/keymap/sublime' // sublime编辑器效果
// import '../../../../libs/codemirror/theme/dracula.css'// 配置里面也需要theme设置为monokai
// import '../../../../libs/codemirror/mode/vue/vue.js' // 配置里面也需要mode设置为vue
// import '../../../../libs/codemirror/addon/selection/active-line'
//
// // 代码提示功能 具体语言可以从 codemirror/addon/hint/ 下引入多个
// import '../../../../libs/codemirror/addon/hint/show-hint.css'
// import '../../../../libs/codemirror/addon/hint/show-hint'
// import '../../../../libs/codemirror/addon/hint/html-hint.js'
// import '../../../../libs/codemirror/addon/hint/css-hint.js'
// import '../../../../libs/codemirror/addon/hint/javascript-hint.js'
//
// // 多语言支持
// import '../../../../libs/codemirror/addon/mode/overlay'
// import '../../../../libs/codemirror/addon/mode/multiplex'
//
// // 代码段折叠功能
// import '../../../../libs/codemirror/addon/fold/foldcode'
// import '../../../../libs/codemirror/addon/fold/foldgutter'
// import '../../../../libs/codemirror/addon/fold/foldgutter.css'
//
// import '../../../../libs/codemirror/addon/fold/brace-fold'
// import '../../../../libs/codemirror/addon/fold/comment-fold'
//
// import '../../../../libs/codemirror/addon/fold/xml-fold.js'
// import '../../../../libs/codemirror/addon/fold/indent-fold.js'
// import '../../../../libs/codemirror/addon/fold/markdown-fold.js'
// import '../../../../libs/codemirror/addon/fold/comment-fold.js'
import { MonacoEditor } from "@/components/Pages/MonacoEditor/index";

export default {
  name: 'ScriptEdit',
  components: { MonacoEditor },
  props: {
    value: { type: String, required: true }
  },
  watch: {
    value(v) {
      this.Code = v
    },
    Code(v) {
      console.log(v === this.value)
      if (v !== this.value) {
        this.$emit('input', v)
      }
    }
  },
  computed: {
    // codemirrorRef() {
    //   return this.$refs.codemirrorRef
    // }
  },
  data() {
    return {
      javaScriptValue: '',
      Code: null,
      cmOptions3: {
        height: '400px',
        showCursorWhenSelecting: true, // 在选择时是否显示光标，默认为false
        extraKeys: { 'Ctrl-Space': 'autocomplete' }, // 智能提示
        smartIndent: true, // 自动缩进，设置是否根据上下文自动缩进,默认为true
        tabSize: 4, // tab的空格个数
        theme: 'dracula', // 主题样式
        lineNumbers: true, // 是否显示行数
        lineWrapping: true, // 是否自动换行
        styleActiveLine: true, // line选择是是否加亮
        matchBrackets: true, // 括号匹配
        // mode: 'text/x-csharp', // 实现javascript代码高亮("text/x-markdown", //实现javascript代码高亮)
        mode: 'text/javascript', // 实现javascript代码高亮("text/x-markdown", //实现javascript代码高亮)
        readOnly: false, // 只读
        change: function(v) {
        }
      },
      cmOptions4: {
        fontSize: '14px',
        lineHeight: '150%',
        border: '',
        height: '96%'
      }
    }
  },
  methods: {
  },
  mounted() {
    this.$nextTick(() => {
    })
  }
}
</script>
<style scoped>
.code-mirror-body {
  width: 100%;
  height: 100%;
  position: relative;

  .code-mirror-tabbar {
    position: absolute;
    top: 0;
    color: red;
    background-color: rgba(0, 255, 89, 0.89);
    z-index: 9;
    display: flex;
    font-size: 22px;
    cursor: pointer;
  }

  .code-mirror {
    border: 1px solid black;
    font-size: 15px;
  }
}
</style>
